function getAssetsURL(path) {
    if (globalThis.localtest) {
        return `chromeext/${path}`;
    }
    return chrome.runtime.getURL(path);
}

// 因为里面有await等加载资源，所以需要async。如果直接写在html文件里面是可以的，但是独立写在js文件里面就需要async了
(async () => {
    let mainPosition = { x: 200, y: 200 };
    function setMainPosition(x, y) {
        mainPosition.x = x;
        mainPosition.y = y;
        ethanPetDiv.style.left = `${x}px`;
        ethanPetDiv.style.top = `${y}px`;
    }

    // 注意和PIXI8的区别，PIXI8使用init进行初始化
    const appcoin = new PIXI.Application({ width: 150, height: 120, backgroundAlpha: 0 });
    // await appcoin.init({ width: 150, height: 120, backgroundAlpha: 0 });

    const ethanPetDiv = document.getElementById("ethanpet_EthanPet");
    ethanPetDiv.appendChild(appcoin.view); // PIXI8使用.canvas而非.view

    let isDragging = false;

    // let imageUrl = getAssetsURL('images/sample.png');
    // await PIXI.Assets.load(imageUrl);
    // let coin = PIXI.Sprite.from(imageUrl);
    // coin.anchor.set(0.5);
    // coin.x = appcoin.screen.width / 2;
    // coin.y = appcoin.screen.height / 2;
    // appcoin.stage.addChild(coin);
    // coin.eventMode = 'static';
    // coin.cursor = 'grab';
    // coin.on('pointerdown', onDragStart);

    let assetsUrl = getAssetsURL('images/hot.json');
    let resource = await PIXI.Assets.load(assetsUrl);
    const coin = new PIXI.spine.Spine(resource.spineData);
    coin.x = appcoin.screen.width / 2;
    coin.y = appcoin.screen.height / 2;

    if (coin.state.hasAnimation('hot')) {
        coin.state.setAnimation(0, 'hot', true);
        coin.state.autoUpdate = true;
    }

    coin.eventMode = 'static';
    coin.cursor = 'grab';
    coin.on('pointerdown', onDragStart);

    appcoin.stage.addChild(coin);

    function onDragStart(event) {
        console.log('@onDragStart', event);
        isDragging = true;
        document.addEventListener('mousemove', onDragMove.bind(this)); // 不要使用appcoin.stage.on('pointermove', ...)，不起作用的
    };

    function onDragMove(event) {
        if (isDragging) {
            console.log('@onDragMove', event.clientX, event.clientY);
            setMainPosition(event.clientX, event.clientY);
        }
    };

    function onDragEnd(event) {
        console.log('@onDragEnd', event);
        if (isDragging) {
            document.removeEventListener('mousemove', onDragMove.bind(this));
            isDragging = false;
        }
    };

    appcoin.eventMode = 'static';
    appcoin.hitArea = appcoin.screen;

    document.addEventListener('mouseup', onDragEnd.bind(this));

    let autoTargetPosition = { x: 200, y: 200 };
    let nextMoveAt = 2000;

    function setNewTarget() {
        autoTargetPosition.x = Math.random() * window.innerWidth;
        autoTargetPosition.y = Math.random() * window.innerHeight;
        console.log('@setNewTarget', autoTargetPosition);
    }

    setNewTarget();
    appcoin.ticker.add((time) => { // PIXI8的time里面有更丰富的参数，lastTime可以从这里拿
        // console.log('@time', nextMoveAt, appcoin.ticker.lastTime);
        if (isDragging) {
            nextMoveAt = appcoin.ticker.lastTime + 3000;
            return;
        }
        if (appcoin.ticker.lastTime < nextMoveAt) {
        } else {
            let vecX = autoTargetPosition.x - mainPosition.x;
            let vecY = autoTargetPosition.y - mainPosition.y;
            let vecLength = Math.sqrt(vecX * vecX + vecY * vecY);
            let vecNormX = vecX / vecLength;
            let vecNormY = vecY / vecLength;
            setMainPosition(mainPosition.x + vecNormX, mainPosition.y + vecNormY);
            if (Math.abs(autoTargetPosition.x - mainPosition.x) < 10) {
                nextMoveAt = appcoin.ticker.lastTime + 3000;
                setNewTarget();
            }
        }
    });
})();


